<template>
  <div>



      <div style="display: flex;margin-top: 10px">
        <el-upload
                   :action="upZipUrl"
                   :show-file-list="false"
                   :on-success="handleZipUploadSuccess"
                   :before-upload="beforeUpload"
                   multiple
        >
          <el-button type="primary">上传 ZIP 文件</el-button>
        </el-upload>

        <el-upload style="margin-left: 20px"
          :action="upFileUrl"
          :show-file-list="false"
          :on-success="handleFileUploadSuccess"
          :before-upload="beforeUpload"
        >
        <el-button type="success">上传单个文件</el-button></el-upload>
        <span style="flex: 1;text-align: right;margin-right: 20px">总文件数：{{fileList.length}}</span>
      </div>


    <el-table :data="fileList" style="width: 100%">
      <el-table-column prop="fileName" label="文件名"></el-table-column>
      <el-table-column prop="filePath" label="路径"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteFile(scope.row.fileName)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
import {deleteFile, files, listFiles} from "@/api/iot/file";

export default {
  data() {
    return {
      fileList: [],
      upZipUrl: process.env.VUE_APP_BASE_API+'/exclude/api/uploadZip',
      upFileUrl: process.env.VUE_APP_BASE_API+'/exclude/api/uploadFile',
    };
  },
  mounted() {
    this.fetchFileList();
  },
  methods: {
    beforeUpload(file) {
      const isZip = file.type === "application/zip"||file.type === "application/x-zip-compressed";
      console.log("文件类型："+file.type)
      if (!isZip) {
        this.$message.error("只能上传 ZIP 文件!");
      }
      return isZip;
    },
    handleZipUploadSuccess() {
      this.$message.success("ZIP 文件上传成功！");
      this.fetchFileList();
    },
    handleFileUploadSuccess() {
      this.$message.success("单个文件上传成功！");
      this.fetchFileList();
    },
    fetchFileList() {
      listFiles().then((response) => {
        this.fileList = response;
      });
    },
    deleteFile(fileName) {
      deleteFile(fileName).then(() => {
        this.$message.success("文件删除成功！");
        this.fetchFileList();
      });
    },
  },
};
</script>
